<template>
	<view class='m-container'>
		<!--网络连接中断-->
		<view v-if="status === -1" class='full network-error'>
			<image class="icon" src="../../static/fail.png" mode="aspectFit"></image>
			<view class="error-tips">网络连接已中断，请检查后重试</view>
		</view>

		<!--加载中-->
		<view v-if="status === 0" class='full'>
			<image class="loading" src="../../static/loading.gif" mode="aspectFit"></image>
		</view>

		<!--请求超时或发生错误-->
		<view v-if="status === 1" class='full time-out'>
			<image class="icon" :src="defaultImages[status]" mode="aspectFit"></image>
			<view class="error-tips">{{tips ? tips : defaultTips[status][0]}}</view>
			<button @click='reload' class='reload-btn'>重新加载</button>
		</view>

		<!--正常页面-->
		<view v-if="status === 2">
			<slot></slot>
		</view>

		<view v-if="status > 5" class="full activity-end">
			<image class="icon" :src="defaultImages[status]" mode="aspectFit"></image>
			<view class="error-tips" style="text-align: center;">
				<view v-if="tips">tips</view>
				<block v-else>
					<view v-for="(item,index) in defaultTips[status]" :key="index">{{item}}</view>
				</block>
			</view>
			<button v-if="btnText" @click='reload' class='reload-btn'>{{btnText}}</button>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: 'm-container',
		data() {
			return {
				imageBaseUri: "https://cdn-ssl.meb.com/mwa",
				defaultTips: {
					1: ['等的太久,还是没反应！'],
					6: ['哎呀，网络好像开小差了~'],
				},
				defaultImages: {
					1: 'https://cdn-ssl.meb.com/mwa/v3.0.2/status-6.png',
					6: 'https://cdn-ssl.meb.com/mwa/v3.0.2/status-6.png',
				},
				title:""
			};
		},
		computed: {
			...mapState(["onLine"]),
		},
	
		/**
		 * 组件的属性列表
		 */
		props: {
			status: {
				type: Number, //0:加载中，1:超时，2：正常  6. 无网络
				value: 3,
			},
			homeBottom: { //home按钮距离页面底部距离
				type: Number,
				value: 180,
			},
			tips: {
				type: String,
				value: ''
			},
			btnText: {
				type: String,
				value: ''
			},
			reloadFunc: {
				type: [Function, undefined],
				default: undefined
			},
		},
		methods: {
			reload() {
				if (this.reloadFunc) {
					this.reloadFunc();
					return
				}
			},
		}


	}
</script>

<style lang="less" scoped>
	.m-container {
		// position: fixed;
		// top: 0;
		// left: 0;
		z-index: 99;
		background: #f6f6f6;

		.full {
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background: #f5f5f5;

			.loading {
				width: 40rpx;
				height: 40rpx;
			}

			.icon {
				width: 466rpx;
				height: 265rpx;
			}

			.reload-btn {
				padding: 0 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 36rpx;
				color: #EA2839;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #EA2839;
				background-color: transparent;
			}


			.error-tips {
				font-size: 28rpx;
				color: #999;
				height: 80rpx;
				margin: 33rpx 0 61rpx 0;
			}
		}
	}

	.go-home-box {
		width: 110rpx;
		height: 110rpx;
		position: fixed;
		bottom: 180rpx;
		right: 10rpx;
		z-index: 49;
		background: white;
		border-radius: 110rpx;
		border: 1rpx solid #D9D9D9;
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;

		.go-home {
			display: block;
			width: 70rpx;
			height: 60rpx;
		}
	}
</style>
